<script>
export default {
  props: ['title', 'value'],
  data() {
    return {
      isShowFileText: false
    }
  },
  methods: {
    UploadExcel(data) {
      this.isShowFileText = true
      this.$emit('input', data.file)
    },
    handleRemove() {
      this.$emit('input', {})
      this.$refs.UploadComponent.clearFiles()
      this.isShowFileText = false
    }
  }
}
</script>
<template>
  <div class="upload_page">
    <div class="upload_item">
      <p class="title">{{ title }}</p>
      <el-upload
        ref="UploadComponent"
        v-show="!isShowFileText"
        class="upload"
        drag
        :limit="1"
        action="aa"
        accept=".xlsx"
        :http-request="UploadExcel"
        :show-file-list="false"
        >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
      </el-upload>
      <div class="upload-name"
        v-show="isShowFileText"
        >
        {{ value && value.name || '123123'}}
        <div class="icon el-icon-close" @click="handleRemove"></div>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.upload_page {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  .upload_item {
    margin: 0 20px;
    .upload-name {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      font-size: 18px;
      font-weight: 700;
      .icon {
        cursor: pointer;
        margin-left: 6px;
        font-size: 18px;
        color: #fff;
        background-color: #304156;
        border-radius: 50%;
        padding: 2px;
      }
      .icon:hover {
        opacity: 0.8;
      }
    }
    .title {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }
  }
}
</style>